import ajax from '../main.js';
import '../../css/systemManage/systemManage.scss';
import '../../js/token'

let searchData ={
    type:'name',
    value:''
}

// 读取本地资料 给顶部 头像赋值----
let userInfo = JSON.parse(localStorage.userInfo);
let [{ avatar, uname }] = userInfo;
$('#nav_avatar').html(`
    <img src="${avatar}" class="layui-nav-img">${uname}
`)


// -------------- 树形表格--------------------------
layui.config({
    base: 'utils/tree/js/',
})

layui.use(['treeTable', 'layer', 'code', 'form'],async function () {
    // ajax请求数据,再把数据给 treetable的data渲染
    const aData = await ajax({
        url:'/system/findPost',
        type:'POST',
        data:searchData
    })
    console.log(aData);
    
    var o = layui.$,
        form = layui.form,
        layer = layui.layer,
        treeTable = layui.treeTable;
    var re = treeTable.render({
        elem: '#tree-organ',
        // url: 'utils/tree/data/table-tree.json',
        // url: 'http://localhost:3000/system/getOrgans',
        data:aData,
        icon_key: 'name',
        is_checkbox: true,
        primary_key: '_id',
        parent_key: 'pid',
        end: function (e) {
            // console.log(e);
            form.render();
        },
        cols: [
            {
                key: '_id',
                title: '岗位编码',
                align: 'center',
                template: function (item) {
                
                    return '<span>' + 'ST-' + item._id.slice(11) + '</span>';
                }
            },
            {
                key: 'name',
                title: '岗位名称',
                template: function (item) {
                    // console.log(item);
                    if (item.level == 0) {
                        return '<span>' + item.name + '</span>';
                    } else if (item.level == 1) {
                        return '<span>' + item.name + '</span>';
                    } else if (item.level == 2) {
                        return '<span>' + item.name + '</span>';
                    }
                }
            },
            
            {
                title: '操作',
                align: 'center',
                
                template: function (item) {
                    return `<a class="organ_update" data-id="${item._id}">编辑</a> | <a class="organ_del" data-id="${item._id}">删除</a>`;
                }
            }
        ]
    });


    // 监听展开关闭
    treeTable.on('tree(flex)', function (data) {
        // layer.msg(JSON.stringify(data));
    })
    // 监听checkbox选择
    treeTable.on('tree(box)', function (data) {
        // console.log(data);
        // if (o(data.elem).parents('#tree-table1').length) {
        //     var text = [];
        //     o(data.elem).parents('#tree-table1').find('.cbx.layui-form-checked').each(function () {
        //         o(this).parents('[data-pid]').length && text.push(o(this).parents('td').next().find('span').text());
        //     })
        //     o(data.elem).parents('#tree-table1').prev().find('input').val(text.join(','));
        // }
        // layer.msg(JSON.stringify(data));
    })
    // 监听自定义
    treeTable.on('tree(add)', function (data) {
        // layer.msg(JSON.stringify(data));
    })
    // 获取选中值，返回值是一个数组（定义的primary_key参数集合）
    o('.get-checked').click(function () {
        // layer.msg('选中参数' + treeTable.checked(re).join(','))
    })
    // 刷新重载树表（一般在异步处理数据后刷新显示）
    // o('.refresh').click(function () {
    //     re.data.push({ "id": 50, "pid": 0, "title": "1-4" }, { "id": 51, "pid": 50, "title": "1-4-1" });
    //     treeTable.render(re);
    // })

    $('#organ-searchBtn').click(async function(){
        searchData.value = $('#organ-input').val();
        const aData = await ajax({
            url:'/system/getOrgans',
            data:searchData
        })
        re.data = aData;
        treeTable.render(re);
    })
})

// 获取机构 渲染到新增的下拉框里----------------
async function getOrgan() {
    const organ = await ajax({
        url: "/system/getOrgan"
    })
    // console.log(organ);
    let options = organ.map(item =>
        `<option value="${item._id}">${item.name}</option>`
    )
    options.unshift('<option value="0">不选择默认-最高级机构</option>')
    options = options.join('');
    // console.log(options);
    $('#sel_organ').html(options)
}
getOrgan();

// 绑定新增按钮
$('#addOrgan').click(function () {
    layui.use('form', function () {
        var form = layui.form, $ = layui.$;
        layer.open({
            title: '新增机构',
            type: 1,
            area: '600px',
            btn: ['确认新增'],
            content: $('#add_organ'),
            yes: async function (index, layero) {
                var data = form.val("add_organ");
                console.log(data);
                if (data.sel_organ == '0') {
                    const res = await ajax({
                        url: '/system/createMaxOrgan',
                        data
                    });
                    if (res.code == 200) {
                        alert(res.message);
                        location.reload();
                    }
                } else {
                    const res = await ajax({
                        url: '/system/createSection',
                        data
                    });
                    if (res.code == 200) {
                        alert(res.message);
                        location.reload();
                    }
                }

                //重置表单
                $('#add_organ')[0].reset();
                form.render();
                layer.close(index); //如果设定了yes回调，需进行手工关闭
            }
        })

        form.on('select(sel_organ)', async function (data) {
            console.log(data.value); //得到被选中的值
            let sections = await ajax({
                url: '/system/getSectionType',
                data: {
                    "_id": data.value
                }
            });
            let secHtml = sections.map(item => `
                <option value="${item.type}" >${item.type}</option>
            `).join('');
            $('#sel_section').html(secHtml);
            form.render('select');

        });

    })
})

// 单行删除----------
$('#tree-organ').on('click', '.organ_del', async function () {
    const _id = $(this).data('id');
    console.log(_id);
    const result = await ajax({
        url: "/system/" + _id,
        type: "DELETE"
    })
    if (result.code == 200) {
        alert(result.message);
        location.reload();
    }
})

// 单行编辑----------
$('#tree-organ').on('click', '.organ_update', async function () {
    const $tr = $(this).parents('tr');
    let organ_id = $(this).data('id')
    console.log(organ_id);

    layui.use('form', async function () {
        var form = layui.form, $ = layui.$;

        //  点击不同类型的编辑时-------
        if ($tr.children().eq(2).find('span').text() == '分公司') {
            // console.log('分公司');
            $('#update_section').prop('disabled', true)
            $('#update_section').html('<option value="分公司" disabled>分公司</option>');
            form.val("update_organ", { // lay-filter="" 对应的值
                "update_name": $tr.children().eq(1).find('span').text(),// "name": "value"
                "update_detail": $tr.children().eq(3).find('span').text(),
                "update_section": '分公司'
            });
        } else {
            // console.log('部门');
            $('#update_section').prop('disabled', false)
            let sections = await ajax({
                url: '/system/getSectionType',
                data: {
                    "_id": '1' // 随便发一个就行,后台需要一个id判断
                }
            });
            let secHtml = sections.map(item => `
                <option value="${item.type}" >${item.type}</option>
            `).join('');
            $('#update_section').html(secHtml);

            // 赋值编辑表单--------------
            form.val("update_organ", { // lay-filter="" 对应的值
                // "organ_id": organ_id,// "name": "value"
                "update_name": $tr.children().eq(1).find('span').text(),
                "update_detail": $tr.children().eq(3).find('span').text(),
                "update_section": $tr.children().eq(2).find('span').text()
            });

        }

        layer.open({
            title: '编辑机构',
            type: 1,
            area: ['600px', '500px'],
            btn: ['确认修改'],
            content: $('#update_organ'),
            success: function (layero, index) {
                form.render();
            },
            yes: async function (index, layero) {
                var data = form.val("update_organ");
                console.log(data);
                console.log(organ_id);
                const result = await ajax({
                    url: "/system/" + organ_id,
                    type: "PUT",
                    data
                })
                console.log(result);
                if (result.code == 200) {
                    alert(result.message);
                    location.reload();
                }
                form.render();
                layer.close(index); //如果设定了yes回调，需进行手工关闭
            }
        })


    })


})